<template>
  <div class="withdraw-config gray-box top-redius border-bottom-gray">
    <div class="title">
      {{ $t('allinpay.userWithdrawalSettings') }}
    </div>
    <el-form
      ref="dataForm"
      label-width="180px"
      class="set-form"
      label-position="left"
      :model="dataForm"
      @submit.prevent
    >
      <!-- 单笔提现 -->
      <el-form-item
        :label="$t('withdraw.eachWithdrawal')"
        style="width:640px"
      >
        <el-input
          v-model.number="dataForm.amountMin"
          style="width: 180px"
          maxlength="10"
          @blur="
            handleValue(
              dataForm.amountMin,
              dataForm.amountMax || 20000,
              'min'
            )"
        >
          <template #append>
            {{ $t('distribution.dbcTip2') }}
          </template>
        </el-input>
        <span class="input-tips"> {{ $t('withdraw.tip2') }} </span>
        <el-input
          v-model.number="dataForm.amountMax"
          style="width: 180px"
          maxlength="10"
          @blur="
            handleValue(
              dataForm.amountMax,
              20000,
              'max'
            )"
        >
          <template #append>
            {{ $t('distribution.dbcTip2') }}
          </template>
        </el-input>
        <div class="tips">
          {{ $t('withdraw.tip3') }}
        </div>
      </el-form-item>
      <!-- 提现频次 -->
      <el-form-item :label="$t('withdraw.withdrawalFrequency') ">
        <el-select
          v-model="dataForm.frequency"
          :placeholder="$t('allinpay.pleaseSelect')"
          style="display: inline-black"
        >
          <el-option
            :label="$t('withdraw.everyDay')"
            :value="1"
          />
          <el-option
            :label="$t('withdraw.weekly')"
            :value="7"
          />
          <el-option
            :label="$t('withdraw.monthly')"
            :value="30"
          />
          <el-option
            :label="$t('withdraw.unlimited')"
            :value="-1"
          />
        </el-select>

        <el-input
          v-if="dataForm.frequency !== -1"
          v-model.number="dataForm.number"
          style="width: 180px; display: inline-black"
          oninput="value=value.replace(/[^\d]/g,'')"
          maxlength="10"
          @change="dataForm.number < 1 ? dataForm.number = 1 : ''"
        >
          <template #append>
            {{ $t('distribution.bcTip4') }}
          </template>
        </el-input>
      </el-form-item>
      <!-- 提现说明 -->
      <el-form-item :label="$t('withdraw.withdrawalInstructions')">
        <el-input
          v-model="dataForm.paymentExplain"
          type="textarea"
          style="width: 300px"
          witdt="230"
          maxlength="50"
          show-word-limit
        />
        <br>
        <span class="tips">{{ $t('withdraw.tip4') }}</span>
      </el-form-item>
      <!-- 提现设置end -->
      <el-button
        size="small"
        @click="dataFormSubmit()"
      >
        {{ $t('sysManagement.save') }}
      </el-button>
    </el-form>
  </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import { onMounted, reactive, toRefs } from 'vue'

const Data = reactive({
  dataForm: {
    distributionSwitch: 0,
    attribution: 1,
    autoCheck: 0,
    expenseNumber: null,
    spuIdList: [],
    spuVOList: [],
    expenseAmount: null,
    realName: false,
    identityCardPic: false,
    identityCardNumber: false,
    frequency: null, // 提现频次
    amountMax: null, // 单笔最高提现金额
    amountMin: null, // 单笔最低提现金额
    paymentExplain: null, // 提现说明
    number: null // 提现次数
  }
})

const { dataForm } = toRefs(Data)

const allinpayStore = useAllinpayStore()
const paySettlementType = computed(() => {
  return allinpayStore.paySettlementType
})

onMounted(() => {
  getData()
})

// 获取数据
const getData = () => {
  http({
    url: http.adornUrl('/platform/distributionConfig/info'),
    method: 'get',
    params: http.adornParams()
  }).then(({ data }) => {
    if (data !== null) {
      if (paySettlementType.value === 1) {
        data = {
          ...data,
          realName: false,
          identityCardPic: false,
          identityCardNumber: false,
          withdrawal: null
        }
      }
      Data.dataForm = data
    }
  })
}

// 提交表单
const dataFormSubmit = () => {
  if (Data.dataForm.amountMin <= 0) {
    ElMessage.error($t('allinpay.withdrawalError'))
    return
  }
  if (Data.dataForm.amountMin >= Data.dataForm.amountMax) {
    ElMessage.error($t('allinpay.withdrawalError2'))
    return
  }
  if (Data.dataForm.amountMax > 20000) {
    ElMessage.error($t('allinpay.withdrawalError3'))
    return
  }
  const param = Data.dataForm
  http({
    url: http.adornUrl('/platform/distributionConfig'),
    method: 'post',
    data: http.adornData(param)
  }).then(() => {
    ElMessage({
      message: $t('allinpay.saveSuccess'),
      type: 'success',
      duration: 1500
    })
  }).catch((e) => {
  })
}

const handleValue = (data, max, type) => {
  // 表格
  if (data > max) {
    if (type === 'max') {
      Data.dataForm.amountMax = max
    } else if (type === 'min') {
      Data.dataForm.amountMin = max
    }
    return
  }
  let tmpVal = data.replace(/[^\d^\\.]/g, '')
  const reg = /^(0|([1-9]\d*))(\.\d{1,2})?$/ // 最多允许后输入两位小数
  if (!reg.test(tmpVal)) {
    tmpVal = tmpVal + ''
    tmpVal = tmpVal.substring(0, tmpVal.indexOf('.') + 3)
    const n = (tmpVal.split('.')).length - 1
    if (n > 1) {
      tmpVal = tmpVal.substring(0, tmpVal.indexOf('.'))
    }
  }
  if (type === 'max') {
    Data.dataForm.amountMax = tmpVal
  } else if (type === 'min') {
    Data.dataForm.amountMin = tmpVal
  }
}

</script>

<style lang="scss" scoped>

</style>
